<link href="//cdn.bootcss.com/switchery/0.8.2/switchery.min.css" rel="stylesheet">
<style scoped>
	.setting-body {
		background: #fff;
		padding: 20px; 
	}
	.setting-body .block {
		overflow: hidden; 
	}
	.setting-body .block .h1 {
		font-size: 16px;
		font-weight: 300;
		line-height: 35px;
		border-bottom: solid 1px #eee;
		padding-bottom: 8px; 
	}
	.setting-body .block .h1_1{border-bottom:none;}
	.setting-body .block .content {
		margin: 15px 0 20px 50px; 
	}
	.setting-body .block .content .script-text {
		width: 800px;
		background: #f4f4f4;
		color: #333;
		font-size: 14px;
		border: none;
		padding: 10px; 
	}
	.setting-body .block .code code {
		padding: 4px 8px;
		background: #000;
		color: #fff;
		font-size: 12px;
		border-radius: 5px;
		margin: 0 3px; 
	}
	.setting-body .block-center {
		width: 500px;
		margin-left: 150px; 
	}
	.setting-body .block-two {
		overflow: hidden; 
	}
	.setting-body .block-two .block-center {
		width: 500px; 
	}
	.setting-body .block-two .onepart {
		width: 40%;
		float: left;
		margin-right: 10%; 
	}
	.button {
		width: 300px;
		height: 45px;
		background: #2077ff;
		color: #fff;
		border: none;
		font-size: 16px;
		border-radius: 3px;
		cursor: pointer;
		margin:20px 0;
		display:block;
		margin-left:70px;
	}
	.setting-body .item {
		margin-bottom: 20px;
		font-size: 14px; 
	}
	.setting-body .item .left {
		display: inline-block;
		width: 150px;
		text-align: right; 
	}
	.setting-body .item input {
		height: 40px;
		background: #f4f4f4;
		border: none;
		width: 300px;
		padding-left: 10px; 
	}
	.setting-body p{
		font-size:14px;
		color:#999;
		line-height:30px;
	}
	@media (max-width: 768px) {
		.setting-body .block .content {
			margin: 15px 0 20px 5px;
		}
		.content .btn{
			margin-bottom:5px;
		}
		.com_slide_tab_x .item{
			padding:0;
			margin-right:20px;
		}
		.setting-body .block-center{
			margin-left:0;
		}
		.setting-body{
			margin: 10px;
    		padding: 10px;
		}
		.setting-body .item{
			font-size:12px;
		}
		.setting-body .item .left{
			width:120px;
		}
		.setting-body .block-two .onepart {
			width: 100%;
		}
		.margin_left{
			margin-left:0;
		}
	}
</style>
<div class="com_content_body main pb100" id="vue_id" v-cloak>
	<h1 class="com_h1">新增WEB应用</h1>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':lable==1}" @click="checkoutLabel(1)">应用部署</div>
		<div class="item" :class="{'active':lable==2}" @click="checkoutLabel(2)">统计设置</div>
		<div class="item" :class="{'active':lable==3}" @click="checkoutLabel(3)">部署说明</div>
	</div>
	<div class="setting-body">
		<div class="block" v-show="lable==1">
			<div class="h1 mb20" v-if="query.app_id"><span class="left">APPID：</span><strong>{{query.app_id}}</strong></div>
			<h1 class="h1">应用录入</h1>
			<div class="block-center">
				<div class="item mt20">
					<span class="left">应用名称：</span>
					<input type="text" v-model.trim="query.system_name" placeholder="必填、我的博客">
				</div>
				<div class="item">
					<span class="left">应用域名：</span>
					<input type="text" v-model.trim="query.system_domain" placeholder="必填、输入域名">
				</div>
			</div>
			<h1 class="h1">各项阀值设置</h1>
			<div class="block-center">
				<div class="item mt20">
					<span class="left">页面慢加载阀值(s)：</span>
					<input type="text" v-model.trim="query.slow_page_time" placeholder="选填、默认5s">
				</div>
				<div class="item">
					<span class="left">AJAX慢加载阀值(s)：</span>
					<input type="text" v-model.trim="query.slow_ajax_time" placeholder="选填、默认2s">
				</div>
				<div class="item">
					<span class="left">JS慢加载阀值(s)：</span>
					<input type="text" v-model.trim="query.slow_js_time" placeholder="选填、默认2s">
				</div>
				<div class="item">
					<span class="left">CSS慢加载阀值(s)：</span>
					<input type="text" v-model.trim="query.slow_css_time" placeholder="选填、默认1s">
				</div>
				<div class="item">
					<span class="left">IMG慢加载阀值(s)：</span>
					<input type="text" v-model.trim="query.slow_img_time" placeholder="选填、默认2s">
				</div>
				
			</div>
			<h1 class="h1">1.启用数据接收</h1>
			<div class="content">
				<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch" checked />
			</div>
		</div>
		<div class="block block-two" v-show="lable==2">
			<div class="light">以下皆为非必填项</div>
			<div class="block-center">
				<div class="onepart">
					<h1 class="h1">是否统计页面性能指标:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span>
						<input type="checkbox" class="js-switch-item js-switch-1" checked />
					</div>
				</div>
				<div class="onepart">
					<h1 class="h1">是否统计AJAX性能指标:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-2" checked />
					</div>
				</div>
				<div class="onepart">
					<h1 class="h1">是否统计资源性能指标:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-3" checked />
					</div>
				</div>
				<div class="onepart">
					<h1 class="h1">是否存储访问者系统信息:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-4" checked />
					</div>
				</div>
				<div class="onepart">
					<h1 class="h1">是否统计错误信息:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-5" checked />
					</div>
				</div>
			</div>
		</div>
		<div class="block" v-show="lable==3">
			<h1 class="h1">1、使用SDK部署方式</h1>
			<div class="content">
				<div class="item">1.1、下载需要的SDK</div>
				<a href="/public/file/web-report-default.min.js.zip"><button class="btn btn-default">通用SDK</button></a>
				<a href="/public/file/web-report-fetch.min.js.zip"><button class="btn btn-default ml10">Fetch专用SDK</button></a>
				<a href="/public/file/web-report-jquery.min.js.zip"><button class="btn btn-default ml10">Jquery专用SDK</button></a>
				<a href="/public/file/web-report-axios.min.js.zip"><button class="btn btn-default ml10">Axios专用SDK</button></a>
				<a href="/public/file/web-report-none.min.js.zip"><button class="btn btn-default ml10">业务代码触发SDK</button></a>
				<div class="item mt20">1.2、详细使用文档请参考以下SDK链接</div>
				<div class="script-text mb20">
					<pre><\script src="/dist/performance-report-default.min.js"><\/script>

<\script>
Performance({
  	domain: '{{location.origin}}/trac/v1/report/web', 
  	add:{
  		appId:'{{query.app_id}}'
  	}
})
<\/script>
</pre>
				</div>
				<a href="https://github.com/wangweianger/performance-report" target="_target">浏览器端性能上报SDK使用文档</a>
			</div>
			<h1 class="h1">2、部署脚本说明</h1>
			<div class="content code">
				<p>复制生成的代码，将其粘贴在<code>&lt;head&gt;</code>中。</p>
				<p class="notice">注意：需要将代码粘贴在<code>&lt;meta&gt;</code>后面，所有<code>&lt;script&gt;</code>前面。</p>
			</div>
		</div>
	</div>
	<div>
		<button class="button left-botton" @click="addSystem" v-if="!isAdd">保存</button>
	</div>
</div>
x<script src="//cdn.bootcss.com/switchery/0.8.2/switchery.min.js"></script>
<script>
new Vue({
	el: '#vue_id',
	data: function () {
		return {
			lable:1, //1:概况 2：pv|uv|ip
			appId: util.getStorage('local', 'appId'),
			query:{
				is_use:0,
				type: 'web',
				system_name:'',
				system_domain:'',
				slow_page_time:'',
				slow_ajax_time:'',
				slow_js_time:'',
				slow_css_time:'',
				slow_img_time:'',
				is_statisi_pages:0,
				is_statisi_ajax:0,
				is_statisi_resource:0,
				is_statisi_system:0,
				is_statisi_error:0,
				user_id:'',
				app_id:'',
				token:'',
			},
			isAdd:false,
		}
	},
	mounted() {
		let userMsg = util.getStorage('local', 'userMsg');
		userMsg = userMsg ? JSON.parse(userMsg) : {};
		this.query.token = userMsg.token || '';

		this.settingIsUse();
		this.pagexingneng();
	},
	methods: {
		checkoutLabel(lable){
			this.lable = lable;
			this.beginTime = '';
			this.endTime = '';
		},
		// 设置项目是否接收数据
		settingIsUse() {
			let elem = document.querySelector('.js-switch');
			elem.checked = true;
			const init = new Switchery(elem, { color: '#8776f7' });
			const _this = this;

			elem.onchange = function () {
				_this.query.is_use = elem.checked ? 0 : 1;
				if(this.isAdd) this.updateSystem();
			};
		},
		addSystem() {
			if (!this.query.system_name) { popup.alert({ title: '请正确填写应用名称!' }); return false; }
			if (!this.query.system_domain) { popup.alert({ title: '请正确填写应用域名!' }); return false; }
			util.ajax({
				url: config.baseApi + 'trac/v1/system/add',
				data: this.query,
				success: data => {
					this.query = data.data;
					this.isAdd = true;
					popup.miss({ title: "操作成功！" });
				}
			})
		},
		// 页面性能指标
		pagexingneng() {
			var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch-item'));
			elems.forEach((html, index) => {
				html.checked = true;
				var switchery = new Switchery(html, { color: '#2077ff' });
				html.onchange = () => {
					if (!this.query.system_name) { popup.alert({ title: '请正确填写应用名称!' }); return false; }
					if (!this.query.system_domain) { popup.alert({ title: '请正确填写应用域名!' }); return false; }

					let value = html.checked ? 0 : 1
					switch (index) {
						case 0:
							this.query.is_statisi_pages = value;
							break;
						case 1:
							this.query.is_statisi_ajax = value;
							break;
						case 2:
							this.query.is_statisi_resource = value;
							break;
						case 3:
							this.query.is_statisi_system = value;
							break;
						case 4:
							this.query.is_statisi_error = value;
							break;
					}
					if (this.isAdd) this.updateSystem();
				}
			});
		},
		updateSystem(){
			util.ajax({
				url: config.baseApi + 'trac/v1/system/update',
				data: this.query,
				success: data => {
					popup.miss({ title: '操作成功!' })
				}
			})
		},
	},
})


</script>